<template>
  <div class="person-performance">
    <mt-header fixed>
      <!-- <mt-button icon="back" @click="goBack" slot="left">返回</mt-button> -->
      <span @click="selectDateTime" slot="right">选择日期</span>
    </mt-header>
    <mt-tabbar v-model="selected">
      <mt-tab-item id="home">
        <i class="fa-shopping-cart fa"></i>
        全部商品
      </mt-tab-item>
      <mt-tab-item id="myinfo">
        <i class="fa-home fa icon-tabbar"></i>
        我的信息
      </mt-tab-item>
      <mt-tab-item id="performance">
        <i class="fa-bar-chart fa icon-tabbar"></i>
        绩效
      </mt-tab-item>
    </mt-tabbar>
    <div class="person-record">
      <span class="selectTime">查询日期：{{chooseTime}}</span>
      <span class="title">团队当月销售总额:
        <span>{{totalMoney}}</span>
      </span>
      <span class="backPoint">返点率：{{backPoint}}</span>
    </div>

    <div class="sale-list">
      <div class="empty-address" v-if="list.length <= 0">
        <div>
          <span class="fa fa-inbox icon-address-empty"></span>
          <br>
          <span>暂无个人销售信息</span>
        </div>
      </div>
      <div class="sale-record" v-for="item in list">
        <div class="sale-text-item">
          <span class="sale-lbl margin-r-20">订单号:</span>
          <span>245673456787654</span>
        </div>
        <div class="sale-text-item">
          <span class="sale-lbl margin-r-20">时间:</span>
          <span>2017年10月1日</span>
        </div>
        <div class="sale-text-item">
          <span class="sale-lbl margin-r-20">商品名称:</span>
          <span class="product-name-lbl">自贡冷吃兔</span>
        </div>
        <div class="sale-text-item">
          <span class="sale-lbl margin-r-20">商品数量:</span>
          <span>20</span>
        </div>
        <div class="sale-text-item">
          <span class="sale-lbl margin-r-20">商品单价:</span>
          <span class="product-price-lbl">￥20</span>
        </div>
        <div class="sale-text-item">
          <span class="sale-lbl margin-r-20">商品总价:</span>
          <span class="product-price-lbl">2000元</span>
        </div>
        <div class="sale-text-item">
          <span class="sale-lbl margin-r-20">交易状态:</span>
          <span class="transaction-success">交易成功</span>
        </div>
      </div>
    </div>

    <div class="bottom-block"></div>

    <div class="chooseTime">
      <mt-datetime-picker ref="picker" type="date" v-model="selectedDate" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
        :startDate="startDate" :endDate="endDate" @confirm="handleChange">
      </mt-datetime-picker>
    </div>
  </div>
</template>

<script>
  import getPerformanceApi from "@/api/performance";
  export default {
    name: "PersonPerformance",
    data: () => ({
      selected: "performance",
      pickerValue: "",
      value: null,
      selectedDate: null,
      chooseTime: new Date().getFullYear() + "年" + (new Date().getMonth() + 1) + "月",
      startDate: new Date("2014"),
      endDate: new Date(),
      list: []
    }),
    watch: {
      selected: function (newValue) {
        if (newValue === "home") {
          window.location.href = "products.html";
        } else if (newValue === "performance") {
          window.location.href = "performance.html";
        } else if (newValue === "myinfo") {
          window.location.href = "my_info.html";
        }
      }
    },
    mounted() {
      this.$Central.$emit("loading", true);
      var memberId = 2;
      getPerformanceApi.getPersonDetaill(memberId).then(
        response => {
          this.$Central.$emit("loading", false);
          if (response.data.code == 0) {
            this.chooseTime = response.data.data.currentMonth
            if (response.data.data.length == 0) {
              this.list = [];
            } else {
              this.list.push({
                id: 1,
                status: false,
                name: "",
                img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1017494309,1548919751&fm=27&gp=0.jpg",
                price: "18.88",
                total: 1
              });
            }

            //          this.list = response.data.data
          } else {
            this.$Utils.$toast("获取购物车信息失败，失败信息:" + response.data.message);
          }
        },
        err => {
          this.$Utils.$toast("系统错误，获取购物车信息失败!");
          this.$Central.$emit("loading", false);
        }
      );
    },
    methods: {
      goBack() {
        window.history.go(-1);
      },
      selectDateTime() {
        this.$refs.picker.open();
      },
      handleChange(value) {
        // this.date1 = value.toString();
        let dateTime = this.$Utils.DateFormat(value.toString());
        let newDate = new Date(dateTime);
        this.chooseTime =
          newDate.getFullYear() + "年" + (newDate.getMonth() + 1) + "月";
      }
    }
  };

</script>


<style lang="scss" scoped>
  @import "../assets/css/px2rem";
  @import "../assets/css/variable";

  .person-record {
    font-size: 0.75rem;
    padding: 0.5rem 0;
    /* background-color: $theme-color; */
    border-radius: 0.6rem;
    width: 95%;
    background: white;
    margin: 0.5rem 2.5% 1rem 2.5%;
    border: 1px solid $theme-color;
    box-shadow: 0 0 10px $theme-color;
    .title,
    .backPoint,
    .selectTime {
      color: #333333;
      width: 95%;
      margin: 0 auto;
      display: block;
      font-size: 0.65rem;
      padding: 0.15rem 0;
    }
  }

  .person-performance {
    display: block;
    position: fixed;
    background: #f5f5f5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-top: px2rem($header-height);
  }

  .sale-record {
    border: 1px solid $theme-color;
    height: auto;
    box-sizing: border-box;
    background: white;
    border-radius: 0.6rem;
    margin: px2rem(50px) 2.5% 0 2.5%;
    box-shadow: 0 0 10px $theme-color;
    width: 95%;
    overflow: hidden;
  }

  .sale-text-item {
    width: 100%;
    height: px2rem(150px);
    line-height: px2rem(150px);
    float: left;
    color: $fontColor;
    box-sizing: border-box;
    padding: 0 px2rem(50px);
    font-size: 0.65rem;
    border-bottom: 1px solid $borderColor;
  }

  .margin-r-20 {
    margin-right: px2rem(20px);
  }

  .empty-address {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #c5c5c5;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: px2rem($header-height) 0;
    flex-wrap: wrap;
  }

  .icon-address-empty {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .transaction-success {
    color: white;
    background: #19be6b;
    padding: px2rem(20px) px2rem(60px);
    font-size: 0.45rem;
    border-radius: 0.5rem;
    margin-left: px2rem(10px);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  .sale-lbl {
    color: #bbb;
  }

  .product-name-lbl {
    color: crimson;
  }

  .product-price-lbl {
    color: $theme-color-deep;
    font-weight: bold;
  }

  .bottom-block {
    float: left;
    width: 100%;
    display: block;
    height: px2rem($header-height + 250px);
    clear: both;
  }

  /* 固定头部样式 */

  .person-performance .mint-tabbar {
    width: 100%;
    position: static !important;
    bottom: 0;
    left: 0;
  }

  .person-performance .mint-tab-item {
    height: 1.8rem !important;
  }

</style>
